<template>
  <el-upload
    :multiple="false"
    :headers="headers"
    :show-file-list="false"
    :action="uploadImgUrl"
    accept=".png,.jpg,.jpeg"
    :before-upload="handleBeforeUpload"
    :on-success="handleUploadSuccess"
  >
    <slot />
  </el-upload>
</template>

<script setup>

import { ref } from "vue";
import {globalHeaders} from "@/utils/request";

const props = defineProps({
    modelValue: String,
});

const emit = defineEmits(['update:modelValue']);

const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(baseUrl + "/resource/oss/upload"); // 上传的图片服务器地址
const headers = ref(globalHeaders());
const { proxy } = getCurrentInstance();

const handleUploadSuccess = (res, file) => {
    if (res.code === 200) {
      emit("update:modelValue", res.data.url);
    } else {
      proxy.$modal.msgError('上传图片失败');
    }
}
</script>
